<template>
  <div class="emoji">
    <div class="innerbox">
      <div class="tab_box">
        <my-scroll>
          <div
            class="emoji_item"
            v-for="(value, key, index) in emojiArr"
            :key="index + '1'"
          >
            <div
              class="line"
              v-for="(item, index2) in value"
              :key="'emoji' + index2"
              v-show="selectTab == index"
            >
              <span
                class="column"
                @click="getEmoji(item2)"
                v-for="(item2, index2) in item"
                :key="index2 + '2'"
              >
                {{ item2 }}
              </span>
            </div>
          </div>
        </my-scroll>
      </div>
    </div>
    <div class="tab">
      <span
        @click="selectTab = index"
        :class="selectTab == index ? activeClass[page] : ''"
        v-for="(item, index) in emojiName"
        :key="'tab' + index"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      emojiArr: {
        emoji: [
          ["😀", "😁", "😂", "🤣", "😃", "😃", "😅"],
          ["😄", "😆", "😉", "😊", "😋", "😎", "😍"],
          ["😎", "😘", "😗", "😙", "🙂", "🤗", "😑"],
          ["😏", "😣", "😥", "😮", "🤐", "😯", "😶"],
          ["😪", "😫", "😴", "😌", "😛", "🤤", "🙄"],
          ["😒", "😓", "😕", "🙃", "🤑", "🙁", "😚"],
          ["😖", "😤", "😭", "😨", "😰", "😬", "😵"],
          ["😱", "😡", "😷", "🤧", "😇", "🤕", "🤢"],
        ],
        other: [
          ["🏃🏼‍♂️", "💏", "👨‍👩‍👧", "💀", "👻", "💍", "💄"],
          ["💩", "👑", "🎓", "👀", "💪🏻", "☝🏻", "✌🏼"],
          ["🤘🏻", "🤙🏼", "👌🏻", "✊🏻", "👍🏼", "👎🏻", "👏🏻"],
          ["🙏🏻", "🤝", "🍖", "🍲", "🍦", "🍰", "🍔"],
          ["🙈", "🙉", "🙊", "💥", "💦", "🐶", "🐷"],
          ["🍁", "🍃", "🌍", "🌜", "🌞", "🌟", "☁"],
          ["⛅", "⛈", "🌪", "☂", "☔", "❄", "☃"],
          ["🍇", "🍈", "🍉", "🍊", "🍋", "🍋", "🍍"],
        ],
        symbol: [
          ["💘", "❤", "💓", "💔", "💕", "💖", "💗"],
          ["💬", "🌀", "♠", "♥", "♦", "♣", "🃏"],
          ["🀄", "🎴", "🔇", "🔈", "🔉", "🔊", "📢"],
          ["🔔", "🔕", "🎵", "🎶", "🏧", "🚮", "🚰"],
          ["♿", "🚹", "🚺", "⚠", "⛔", "🚳", "🚭"],
          ["🚯", "🔞", "☢", "⬆", "↗", "➡", "↘"],
          ["⬇", "↙", "⬅", "↖", "↕", "↔", "↩"],
          ["↪", "⤴", "⤵", "🔄", "🔙", "🔚", "🔛"],
        ],
      },
      emojiName: ["表情", "符号", "其他"],
      selectTab: 0,
      activeClass: {
        chat: "active",
        other: "other_active",
      },
    }
  },
  // page是处于哪个页面，在chat页面表情的tab切换按钮的active类和其他页面的other_active类是背景颜色是不一样的
  props: ["page"],
  methods: {
    // 点击表情
    getEmoji(emoji) {
      this.$emit("addEmoji", emoji)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";
@import "./emoji.scss";
</style>
